<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/cart.js"></script>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<!--header-->
<div class="header2">
    <div class="header-box">
        <div class="header">
            <div class="header-left-title">
                <div class="welcome"><img  class="icon" src="images/icon/welcome.png" alt="">&nbsp;欢迎来到<a href="">AnJunDCM官网</a>!</div>
                <div class="login">&nbsp;&nbsp;&nbsp;<a href="login.html">登陆</a>&nbsp;丨&nbsp;<a href="reg.html">免费注册</a></div>
            </div>
            <div class="header-center-title">
                <ul>
                    <li><a href="">我的AnJun</a></li>
                    <li><a href="cart.html">购物车</a><span class="count">1</span></li>
                    <li><a href="">我的订单</a></li>
                    <li><a href="">收藏网站</a></li>
                    <li><a href="">积分</a></li>
                </ul>
            </div>
            <div class="header_right_title">
                <ul>
                    <li><a href="">我要供货</a></li>
                    <li><a href="">客服中心<i class="kefu-icon"><img src="images/kefu.png" alt="" width="20" height="20"></i></a></li>

                </ul>

            </div>


        </div>
        <div class="header-nav-box">
            <div class="nav">
                <div class="nav-logo">
                    <a href="" class="logo"><img src="images/logo.png" alt=""></a>
                </div>
                <div class="nav-search-box">
                    <form action="" name="fomr1">
                        <div class="nav-search">
                            <div class="bar1">
                                <input type="text" placeholder="请输入您要搜索的内容..." class="text"><button type="submit" class="btn">搜索</button>
                            </div>
                            <div class="search-key">
                                <span class="key-title">热搜词汇:</span>
                                <div class="key">
                                    <ul>
                                        <li><a href="">手机</a></li>
                                        <li><a href="">电子产品</a></li>
                                        <li><a href="">衣服</a></li>
                                        <li><a href="">鞋子</a></li>
                                        <li><a href="">鞋子</a></li>
                                        <li><a href="">鞋子</a></li>
                                        <li><a href="">鞋子</a></li>
                                        <li><a href="">鞋子</a></li>
                                        <li><a href="">鞋子</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="wechat-box">
                    <ul>
                        <li><img src="images/app.jpg" alt="" width="110" height="110"></li>
                        <li><img src="images/app.jpg" alt="" width="110" height="110"></li>
                    </ul>
                </div>

            </div>
            <div class="nav-daohang">
                <div class="daohang">
                    <ul>
                        <li><a href="goods.html">全部分类</a></li>
                        <li><a href="index.html">首页</a></li>
                        <li><a href=""> 选品采购</a></li>
                        <li><a href="daigou.html">指定代购</a></li>
                        <li><a href="need.html"> 需求提交</a></li>
                        <li><a href="">个性定制</a></li>
                        <li><a href="wl-case.html">物流方案</a></li>
                        <li><a href="join.html">我要入驻</a></li>
                        <li><a href="us.html">关于我们</a></li>

                    </ul></div>
            </div>

        </div>
    </div></div>
<!--hearder end!-->


<!--cart-->

<div class="cart-box" id="app">

    <!--步骤图-->
    <div class="cart-buzhou">
        <img src="images/cart-move.jpg" alt="">

    </div>
<!--步骤图end-->

    <!--购物车-->
    <div class="catbox">
        <table id="cartTable">
            <thead>
            <tr>
                <th ><label><input class="check-all check" type="checkbox"/>&nbsp;全选</label></th>
                <th >商品</th>
                <th>单价</th>
                <th >数量</th>
                <th >小计</th>
                <th >操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in cartDetail" :key="item.mgoods.gid" >
                <td class="checkbox"><input class="check-one check" type="checkbox" v-model="selectedProductsId" :value="item.mgoods.gid" :checked="isSelected(item.mgoods.gid)" @change="handleSelection(item)" /></td>
                <td class="cart-goods"><img :src="item.mgoods.gimage" alt=""/><span><a href="" class="cart-goods-link">{{item.mgoods.gname}}</a></span></td>
                <td class="price">{{item.mgoods.gprice}}</td>
<!--                <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1" v-model="item.quantity"/><span class="add">+</span></td>-->
<!--                <td class="subtotal">5999.88</td>-->
                <td class="count">
                    <span class="reduce" @click="item.quantity > 1 ? reduceQuantity(item) : item.quantity">-</span>
                    <input class="count-input" type="number" v-model.number="item.quantity"/>
                    <span class="add" @click="increaseQuantity(item)">+</span>
                </td>
                <td class="subtotal">{{ item.mgoods.gprice * item.quantity }}</td>
                <td class="operation"><span class="delete" @click="deleteCar(item)">删除</span></td>
            </tr>
<!--            <tr>-->
<!--                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>-->
<!--                <td class="cart-goods"><img src="images/2-2.jpg" alt=""/><span><a href="" class="cart-goods-link">Canon/佳能 PowerShot SX50 HS</a></span></td>-->
<!--                <td class="price">3888.50</td>-->
<!--                <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>-->
<!--                <td class="subtotal">3888.50</td>-->
<!--                <td class="operation"><span class="delete">删除</span></td>-->
<!--            </tr>-->
<!--            <tr>-->
<!--                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>-->
<!--                <td class="cart-goods"><img src="images/3-3.jpg" alt=""/><span><a href="" class="cart-goods-link">Sony/索尼 DSC-WX300</a></span></td>-->
<!--                <td class="price">1428.50</td>-->
<!--                <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>-->
<!--                <td class="subtotal">1428.50</td>-->
<!--                <td class="operation"><span class="delete">删除</span></td>-->
<!--            </tr>-->
<!--            <tr>-->
<!--                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>-->
<!--                <td class="cart-goods"><img src="images/4-4.jpg" alt=""/><span><a href="" class="cart-goods-link">Fujifilm/富士 instax mini 25</a></span></td>-->
<!--                <td class="price">500</td>-->
<!--                <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>-->
<!--                <td class="subtotal">640.60</td>-->
<!--                <td class="operation"><span class="delete">删除</span></td>-->
<!--            </tr>-->
            </tbody>
        </table>

        <div class="foot" id="foot">
            <label class="fl select-all"><input type="checkbox" class="check-all check"/>&nbsp;全选</label>
            <a class="fl delete" id="deleteAll" href="javascript:;">删除</a>

            <div class="fr closing"><a :href="'cart2.html?selectedProductsId=' + selectedProductsId.join(',')" @click.prevent="navigateToCart">结 算</a></div>
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="images/1-1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>

    </div>
    <!--购物车end!-->



</div>

<!--cart end!-->

<!--footer-->
<div class="footer-box" >
    <div class="footer-list-box">
        <div class="footer-list">
            <ul><img src="images/icon/about.png" alt="" width="20" height="20">&nbsp;关于我们
                <li class="magin"><a href="">关于安骏</a></li>
                <li><a href="">产品服务</a></li>
                <li><a href="">联系我们</a></li>
                <li><a href="">企业文化</a></li>
            </ul>
        </div>

        <div class="footer-list">
            <ul><img src="images/icon/zhinan.png" alt="" width="20" height="20">&nbsp;新手指南
                <li class="magin"><a href="">新手福利</a></li>
                <li><a href="">推荐有奖</a></li>
                <li><a href="">会员中心</a></li>
                <li><a href="">我的积分</a></li>
                <li><a href="">客服中心</a></li>
            </ul>
        </div>

        <div class="footer-list">
            <ul><img src="images/icon/zhifu.png" alt="" width="20" height="20">&nbsp;支付方式
                <li class="magin"><a href="">支付宝</a></li>
                <li><a href="">WeChat</a></li>
                <li><a href="">前海支付</a></li>
                <li><a href="">银联支付</a></li>
                <li><a href="">其它支付</a></li>
            </ul>
        </div>

        <div class="footer-list">
            <ul><img src="images/icon/daohang.png" alt="" width="20" height="20">&nbsp;网站导航
                <li class="magin"><a href="">选品采购</a></li>
                <li><a href="">指定代购</a></li>
                <li><a href="">需求提交</a></li>
                <li><a href="">我要入驻</a></li>
                <li><a href="">系统登录</a></li>
            </ul>
        </div>

        <div class="footer-list">
            <ul><img src="images/kefu.png" alt="" width="20" height="20">&nbsp;客服电话：
                <li class="magin" id="phone"><a href="">0755-12345678</a></li>
                <li><a href="">地址：深圳市龙岗区坂田街道格泰隆工业园</a></li>
                <li><a href="">邮箱：123456789@qq.com</a></li>

            </ul>
        </div>

        <div class="footer-list" style="margin-left: 100px;">
            <ul><img src="images/app.jpg" alt="" width="150" height="150">
                <li class="magin" id="guanzhu"><a href="">关注安骏</a></li>

            </ul>
        </div>


    </div>
    <div class="footer-footer">
        © 2020-2020 AnJun DCM  All Rights Reserved 9.0 备案号：123456789

    </div>

</div>
<!--footer end!-->
<script>
    new Vue({
        el: '#app',
        data: {
            cartDetail:[],
            selectedProductsId: [] //存储购物车数组id
        },
        mounted() {
            this.getCargoods();
        },
        methods:{

            navigateToCart() {
                // 构建带有参数的URL
                const url = 'cart2.html?selectedProductsId=' + this.selectedProductsId.join(',');
                // 跳转到该URL
                window.location.href = url;
            },
            //获取购物车商品信息
            getCargoods(){
                axios.get("https://127.0.0.1/market-goods/mgoods/getCargoods", {
                    params: {

                    }
                }).then(res=>{
                    this.cartDetail=res.data;
                });
            },

            //增加购物车数量
            increaseQuantity(item) {
                // 发送请求到后端API来增加商品数量
                // 你需要根据你的后端API来调整这个请求
                axios.post("https://127.0.0.1/market-goods/mgoods/increaseQuantity", {
                    gid: item.mgoods.id,
                    quantity: item.quantity++,
                    uid:item.mgoods.uid
                })
                    .then(response => {
                        // 假设后端成功更新了数量并返回了新的数量

                        if(response==500){
                            alert("数量修改没成功")
                        }
                        else {
                            item.quantity = response;
                        }
                    })
                    .catch(error => {
                        console.error('Error updating quantity:', error);
                    });
            },
            reduceQuantity(item){
                axios.post("https://127.0.0.1/market-goods/mgoods/reduceQuantity", {
                    gid: item.mgoods.id,
                    quantity: item.quantity--,
                    uid:item.mgoods.uid
                })
                    .then(response => {
                        // 假设后端成功更新了数量并返回了新的数量

                        if(response==500){
                            alert("数量修改没成功")
                        }else {
                            item.quantity = response;
                        }
                    })
                    .catch(error => {
                        console.error('Error updating quantity:', error);
                    });
            },
            //删除购物车
            deleteCar(item){
        axios.get("https://127.0.0.1/market-goods/mgoods/deleteCar", {
            params: {
                gid:item.mgoods.gid,
                uid:item.mgoods.uid
            }
        }).then(res=>{
            if (res==1){
                alert("删除成功")
            }else {
                alert("删除失败")
            }
        });
    },     //判断商品id是否在数组中
            isSelected(gid) {
                // 检查商品 ID 是否在选中的商品 ID 数组中
                return this.selectedProductsId.includes(gid);
            },
            handleSelection(item) {
                // 检查商品是否已经被选中
                if (event.target.checked) {
                    // 如果被选中，将其添加到 selectedProductsId 数组中
                    if (!this.selectedProductsId.includes(item.mgoods.gid)) {
                        this.selectedProductsId.push(item.mgoods.gid);
                    }
                    // 调用被选中时需要执行的方法
                    // this.onSelect(item);
                } else {
                    // 如果取消选中，从 selectedProductsId 数组中移除
                    const index = this.selectedProductsId.indexOf(item.mgoods.gid);
                    if (index > -1) {
                        this.selectedProductsId.splice(index, 1);
                    }
                }
            },
            onSelect(item) {
                // 当商品被选中时执行的操作
                console.log('Product selected:', item.mgoods.gid);
                // 在这里添加你的逻辑
            },
        },

    })
</script>


</body>
</html>